﻿<style>
    
</style>
<div class="bui-page">
	<header class="bui-bar">
		<div class="bui-bar-left">
            <a class="bui-btn btn-back"><i class="icon-back"></i></a>
			
		</div>
		<div class="bui-bar-main">图片列表</div>
		<div class="bui-bar-right">
		</div>
	</header>
	<main>
        <div class="bui-panel panel-photo">
            <div class="bui-panel-head">横向滚动图片</div>
            <div class="bui-panel-main">
                <!-- 滚动图片 -->
                <div class="bui-scroll-x">
                    <div class="bui-scroll-main">
                        <ul class="bui-list-pic">
                            <li>
                                <div class="bui-pic">
                                    <div class="bui-pic-img"><img src="images/list-img1.png" alt="" ></div>
                                    <div class="bui-pic-title">图片标题图片标题图片标题图片标题</div>
                                </div>
                            </li>
                            <li>
                                <div class="bui-pic">
                                    <div class="bui-pic-img"><img src="images/list-img2.png" alt="" ></div>
                                    <div class="bui-pic-title">图片标题</div>
                                </div>
                            </li>
                            <li>
                                <div class="bui-pic">
                                    <div class="bui-pic-img"><img src="images/list-img1.png" alt="" ></div>
                                    <div class="bui-pic-title">图片标题图片标题图片标题图片标题</div>
                                </div>
                            </li>
                            <li>
                                <div class="bui-pic">
                                    <div class="bui-pic-img"><img src="images/list-img2.png" alt="" ></div>
                                    <div class="bui-pic-title">图片标题</div>
                                </div>
                            </li>
                            <li>
                                <div class="bui-pic">
                                    <div class="bui-pic-img"><img src="images/list-img1.png" alt="" ></div>
                                    <div class="bui-pic-title">图片标题图片标题图片标题图片标题</div>
                                </div>
                            </li>
                            <li>
                                <div class="bui-pic">
                                    <div class="bui-pic-img"><img src="images/list-img2.png" alt="" ></div>
                                    <div class="bui-pic-title">图片标题</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <ul class="bui-list-pic">
            <li class="bui-btn">
                <h3 class="item-title bui-align-left">图片标题单行</h3>
                <div class="bui-box-space container-full">
                    <div class="span1">
                        <div class="bui-pic"><img src="images/list-img1.png" alt=""></div>
                    </div>
                    <div class="span1">
                        <div class="bui-pic"><img src="images/list-img1.png" alt=""></div>
                    </div>
                    <div class="span1">
                        <div class="bui-pic"><img src="images/list-img1.png" alt=""></div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="section-title">四列</div>
        <!-- 四列 -->
        <ul class="bui-list-pic bui-fluid-space-4">
            <li>
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img1.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题图片标题图片标题图片标题</div>
                </div>
            </li>
            <li>
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img2.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题</div>
                </div>
            </li>
            <li>
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img1.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题图片标题图片标题图片标题</div>
                </div>
            </li>
            <li>
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img2.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题</div>
                </div>
            </li>
        </ul>
        <div class="section-title">四列</div>
        <!-- 四列 -->
        <ul class="bui-list-pic bui-fluid-space-4">
            <li>
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img1.png" alt="" ></div>
                    <div class="bui-pic-title bui-abs-bottom">图片标题图片标题图片标题图片标题</div>
                </div>
            </li>
            <li>
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img2.png" alt="" ></div>
                    <div class="bui-pic-title bui-abs-bottom">图片标题</div>
                </div>
            </li>
            <li>
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img1.png" alt="" ></div>
                    <div class="bui-pic-title bui-abs-bottom">图片标题图片标题图片标题图片标题</div>
                </div>
            </li>
            <li>
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img2.png" alt="" ></div>
                    <div class="bui-pic-title bui-abs-bottom">图片标题</div>
                </div>
            </li>
        </ul>
        <div class="section-title">两列</div>
        <!-- 两列 -->
        <div class="bui-list-pic bui-fluid-space-2">
            <div class="span1">
                <div class="bui-pic bui-sub" data-sub="新品">
                    <div class="bui-pic-img"><img src="images/list-img1.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题图片标题图片标题图片标题</div>
                </div>
            </div>
            <div class="span1">
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img2.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题</div>
                </div>
            </div>
            <div class="span1">
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img2.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题</div>
                </div>
            </div>
            <div class="span1">
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img1.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题</div>
                </div>
            </div>
            <div class="span1">
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img2.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题</div>
                </div>
            </div>
            <div class="span1">
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img1.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题</div>
                </div>
            </div>
            <div class="span1">
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img2.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题</div>
                </div>
            </div>
            <div class="span1">
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img1.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题</div>
                </div>
            </div>
            <div class="span1">
                <div class="bui-pic">
                    <div class="bui-pic-img"><img src="images/list-img1.png" alt="" ></div>
                    <div class="bui-pic-title">图片标题</div>
                </div>
            </div>
        </div>
	</main>
</div>
